<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        /* 取消左右箭头的背景图片 */
        .carousel-control.left,
        .carousel-control.right {
            background-image: none;
        }

        /* 设置轮播分页器的样式,使用自定义的样式进行覆盖bootstrap.css样式 */
        .carousel-indicators li {
            display: inline-block;
            width: 30px;
            height: 2px;
            margin: 1px;
            text-indent: -999px;
            cursor: pointer;
            background-color: #000 \9;
            background-color: rgba(0, 0, 0, 0);
            border: 1px solid #fff;
        }

        .carousel-indicators .active {
            width: 30px;
            height: 2px;
            margin: 1px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 轮播图 -->
        <div class="carousel slide col-sm-4 col-sm-offset-4" id="carousel-wrap">
            <!-- 分页器 carousel-indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-wrap" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-wrap" data-slide-to="1"></li>
                <li data-target="#carousel-wrap" data-slide-to="2"></li>
            </ol>
            <!-- 轮播容器 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="../img/4.jpg" alt="" width="100%">
                    <div class="carousel-caption">
                        学员旅行微电影-清迈篇
                    </div>
                </div>
                <div class="item">
                    <img src="../img/5.jpg" alt="" width="100%">
                    <div class="carousel-caption">
                        学员旅行微电影-斯里兰卡篇
                    </div>
                </div>
                <div class="item">
                    <img src="../img/6.jpg" alt="" width="100%">
                    <div class="carousel-caption">
                        小美带你GO-精彩花絮1
                    </div>
                </div>

            </div>
            <!-- 左右箭头 -->
            <a href="#carousel-wrap" class="carousel-control left" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel-wrap" class="carousel-control right" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</body>
<script>
    $(function () {
        $('.carousel').carousel({
            interval: 2000
        })
    })
</script>

</html>